/**
 * 装车控制 - 硬件参数 - 物料参数设置 - 弹窗
 * @author xiaoxujs
 */

import { FC, useEffect, useState } from "react";
import { IIYckzZyLoadControlParamSetSetPlcOffsetVOS, IYckzZyLoadControlParamSet } from "../../../../../type/remoteControl/loadingControlList";
import { Button, Input, message, Modal, Table, TableColumnsType } from "antd";
import { postYckzZyLoadControlPlcOffsetUpdate } from "../../../api";


const PianyiliangSetModule: FC<{
    open: boolean,
    handleSetCallback: () => void;
    clickData?: IYckzZyLoadControlParamSet
}> = ({
    open,
    handleSetCallback,
    clickData
}) => {

        const [loading, setLoading] = useState(false);
        const [listData, setListData] = useState<IIYckzZyLoadControlParamSetSetPlcOffsetVOS[]>([]);

        useEffect(() => {
            if (clickData && clickData.setPlcVO && clickData.setPlcVO.setPlcOffsetVOS) {
                setListData(clickData.setPlcVO.setPlcOffsetVOS)
            }
        }, [clickData]);
        // 修改
        const handleChange = (index: number, name: 'label' | 'offset', value: string) => {
            let arr = [...listData];
            arr[index][name] = value;
            setListData([...arr]);
        }
        // 删除
        const handleDelete = (index: number) => {
            let arr = [...listData];
            arr.splice(index, 1)
            setListData([...arr]);
        }
        const columns: TableColumnsType<IIYckzZyLoadControlParamSetSetPlcOffsetVOS> = [
            {
                key: 'label',
                title: '标签',
                dataIndex: 'label',
                align: 'center',
                render: (text, record, index) => <Input value={text} onChange={e => handleChange(index, 'label', e.target.value)} />
            },
            {
                key: 'offset',
                title: '偏移量',
                dataIndex: 'offset',
                align: 'center',
                render: (text, record, index) => <Input value={text} onChange={e => handleChange(index, 'offset', e.target.value)} />
            },
            {
                key: 'action',
                title: '操作',
                align: 'center',
                render: (text, record, index) => <Button type="link" onClick={() => handleDelete(index)}>删除</Button>
            },
        ];

        const handleOk = async () => {
            if (clickData) {
                setLoading(true);
                const { code, msg } = await postYckzZyLoadControlPlcOffsetUpdate({
                    setPlcOffsetVOS: listData,
                    plcId: clickData.setPlcVO.plcId
                }) as { code: number; msg: string };
                if (code === 20000) {
                    setListData([]);
                    handleSetCallback();
                } else {
                    message.error(msg)
                }
                setLoading(false)

            }

        };

        const handleCancel = () => {
            handleSetCallback();
        };
        //  添加一项
        const handleAdd = () => {
            console.log(listData)
            let arr = [...listData];
            arr.push({
                label: '',
                offset: ''
            })

            setListData([...arr]);
        }
        return <Modal title="偏移量参数" confirmLoading={loading} open={open} onOk={handleOk} onCancel={handleCancel}>
            <Table<IIYckzZyLoadControlParamSetSetPlcOffsetVOS>
                bordered
                dataSource={listData}
                columns={columns}
                pagination={false}
            />
            <Button type='primary' block onClick={() => handleAdd()}>
                添加一项
            </Button>
        </Modal>
    }

export default PianyiliangSetModule;